<template>
	<view>
		<view class="dis aic jcsa li" v-for="(item,index) in list " :key="index">
			<view class="dis aic">
				<view class="aravar_box">
					<image :src="item.avatar" mode="widthFix" style="width: 100%;"></image>
				</view>
				<view class="">
					<view class="nickName">
						{{item.nickName}}
					</view>
					<view class="createTime">
						关注了你{{item.createTime | formatDateTime}}
					</view>
				</view>
			</view>
			<view class="btn" @click="Follow(item)">
				{{item.isFollow == 0 ? '回关' : '已关注' }}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		followMyList,
		follow
	} from '@/api.js'
	export default {
		data() {
			return {
				list: []
			}
		},
		onShow() {
			this.init()
		},
		filters: {
			formatDateTime(value) {
				if (!value) return '';
				return value.substring(5, 16);

			}
		},

		methods: {
			init() {
				this.getList()
			},
			async getList() {
				let res = await followMyList({
					pageNo: 1,
					pageSize: 99999,
				})
				this.list = res.result.records
				console.log('关注列表', res.result.records);
			},
			async Follow(item) {
				console.log('item', item);
				let res = await follow({
					memberId: item.id,
					type: item.isFollow == 1 ? 0 : 1
				})
				if (res.code == 200) {
					this.list.forEach((el) => {
						if (el.id == item.id) {
							el.isFollow = el.isFollow == 0 ? 1 : 0
						}
					})
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	.li {
		padding: 14rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.aravar_box {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50% 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		margin-right: 30rpx;
	}

	.nickName {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 26rpx;
		color: #000000;
	}

	.createTime {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #707070;
		margin-top: 10rpx;
	}

	.btn {
		width: 126rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		background: #F6D44D;
		border-radius: 52rpx 52rpx 52rpx 52rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
	}
</style>